<template>
  <div class="tab-container" style="overflow-y: auto;">

    <table  cellpadding=0 cellspacing=0 border="0"
           style="width:100%;border: 1px solid#ccc;padding: 50px;">
      <tr style="border-bottom: 1px solid#ccc;">
        <td style="width:100px;padding:10px"> 内容</td>
        <td>
        <textarea placeholder="请输入" maxlength="200" v-model="form.content" rows="3" cols="20"
                  style="width:80%;height:80px;">
        </textarea>
        </td>
      </tr>
      <tr style="border-bottom: 1px solid#ccc;">
        <td style="width:100px;padding:10px">&nbsp;&nbsp;链接</td>
        <td>
          <el-input v-model="form.linkUrl" placeholder="请输入" style="width:80%"></el-input>
        </td>
      </tr>
      <tr style="border-bottom: 1px solid#ccc;">
        <td style="width:100px;padding:10px">上传图片</td>
        <td>
          <!--<el-upload class="avatar-uploader"-->
                     <!--:http-request="uploadSectionFile" :before-upload="beforeUploadImg" list-type="picture-card"-->
                     <!--:file-list="form.imgUrl"-->
            <!--<i class="el-icon-plus avatar-uploader-icon"></i>-->
          <!--</el-upload>-->
          <el-upload
            :http-request="uploadSectionFile"
            list-type="picture-card" :file-list="imgUrlList"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </td>
      </tr>

    </table>
    <div style="padding-left: 35%;margin: 40px 0  0  0;height: 100px;">
      <div class="">
        <el-button type="primary" style="width: 120px;" @click="saveObj()">保存</el-button>
        <el-button type="primary" style="width: 120px;" @click="back">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getObj,
    saveObj,
    delObj,
    delFile,
    uploadFile,
  } from '@/api/floatBox'
  import {
    getToken,
  } from '@/utils/auth'

  export default {
    components: {},
    data() {
      return {
        title: "",
        bank: '1',
        list: [],
        timeType: '1',
        dialogStatus: '',
        dialogFormVisible: false,
        dialogShowRole: false,
        dialogShowDep: false,
        dialogShowSH: false,
        dialogShowLevel: false,
        dialogadd: false,
        dialogsave: false,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10,
        },
        treeData: [],
        loading: true,
        userType: '',
        multipleSelection: [],
        detailData: '',
        tfcheckStatus: '',
        checkStatus: -1,
        leafNodeslist: [],
        form: {
          id: '',
          content: '',
          linkUrl: '',
          imgUrl: ''
        },
        imgUrlList:[]
      }
    },
    mounted() {
      if (this.$route.params.itemId) {
        this.loadData(this.$route.params.itemId)
      }
    }
    ,
    computed: {}
    ,
    methods: {
      beforeUploadImg(file) {
        const isLt10M = file.size / 1024 / 1024 < 10;
        if (['image/png', 'image/jpeg',].indexOf(file.type) == -1) {
          this.$message.error('请上传正确的图片');
          return false;
        }
        if (!isLt10M) {
          this.$message.error('上传文件大小不能超过10MB哦!');
          return false;
        }
      }
      ,
      //上传图片
      async uploadSectionFile(param) { //自定义文件上传
        this.form.imgUrl = []
        var fileObj = param.file;
        // 接收上传文件的后台地址
        // FormData 对象
        var form = new FormData();
        // 文件对象
        form.append("file", fileObj);
        // 其他参数
        // form.append("xxx", xxx);
        let {
          data,
          success
        } = await uploadFile(form)
        debugger
        let obj = {
          name: data.fileName,
          savePath: data.savePath,
          url: this.imgBaseUrl + data.savePath
        }
        this.form.imgUrl = obj.savePath;
        var array = [];
        array.push(obj);
        this.imgUrlList = array;
      }
      ,
      handleRemove(file, fileList) {
        var fileName = this.imgUrlList[0].savePath;
        delFile(fileName);
      },
      back() {
        window.history.go(-1);
      }
      ,
      async loadData(id) {
        let {
          data,
          success
        } = await getObj(id)
        this.imgUrlList = [{
          name: 'name.jpg',
          url: this.imgBaseUrl + data.imgUrl
        }]
        this.form = data;
      }
      ,
      async saveObj() {
        let {
          data,
          success
        } = await saveObj(this.form)

        if (success) {
          this.$message({
            message: '保存成功',
            type: 'success'
          });
          window.history.go(-1);
        } else {
          this.$message({
            message: data.message,
            type: 'success'
          });
        }
      }
    }
  }
</script>

<style lang="scss">
  @import '../../styles/index.scss'; // 全局自定义的css样式
</style>
